import 'package:flutter/material.dart';

class CardDemo extends StatefulWidget {
  final String title;
  final String subtitle;

  const CardDemo({
    Key? key,
    required this.title,
    required this.subtitle,
  }) : super(key: key);

  @override
  _CardDemoState createState() => _CardDemoState();
}

class _CardDemoState extends State<CardDemo> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 180.0,
      height: 320.0, // 增加高度以容纳图片和按钮
      child: Stack(
        clipBehavior: Clip.none,
        children: <Widget>[
          Positioned.fill(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
                side: const BorderSide(color: Colors.black),
              ),
              elevation: 4, // 设置卡片阴影
              color: Colors.white, // 设置卡片背景色
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      widget.title,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 5), // 添加一个间距以分隔按钮和文本
                    Text(
                      widget.subtitle,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 15.0,
                      ),
                      overflow: TextOverflow.ellipsis, // 控制文本溢出的方式
                    ),
                    const SizedBox(height: 10), // 添加一个间距以分隔按钮和文本
                    //渐变按钮
                    Container(
                      width: 120.0,
                      height: 40.0,
                      decoration: BoxDecoration(
                        gradient: const LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [Colors.blue, Colors.purple], // 渐变色
                        ),
                        borderRadius: BorderRadius.circular(10), // 设置圆角
                      ),
                      child: GestureDetector(
                        onTap: () {
                          // 点击事件处理逻辑
                        },
                        child: const Center(
                          child: Text(
                            'Free 5 min',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          // 第一张图片
          Positioned(
            top: -40,
            left: 40,
            child: Image.asset(
              "resources/images/defaultAvatar.png",
              width: 100, // 设置图片宽度
              height: 100, // 设置图片高度
            ),
          ),
          // 第二张图片
          Positioned(
            top: -40, // 调整第二张图片的位置，使其与第一张图片重叠
            left: 40,
            child: Image.asset(
              "resources/images/picTarotFram.png",
              width: 100, // 设置图片宽度
              height: 100, // 设置图片高度
            ),
          ),
          // 小圆点
          const Positioned(
            top: 33, // 根据需要调整小圆点的位置
            left: 99, // 根据需要调整小圆点的位置
            child: CircleAvatar(
              backgroundColor: Colors.green,
              radius: 5,
            ),
          ),
        ],
      ),
    );
  }
}
